<template>
  <div class="songDetails w">
    <div>
      <el-empty
        v-if="Object.keys(songDeatils).length === 0"
        description="歌曲信息正在加载,请稍后"
      ></el-empty>
      <div class="songDetails_info" v-else>
        <el-row>
          <el-col :span="6">
            <GlobalImageDeep
              :imgWidth="250"
              :imgHeight="250"
              :url="songDeatils.al.picUrl"
            />
          </el-col>
          <el-col :span="17" :offset="1">
            <h2>{{ songDeatils.name }}</h2>
            <!-- 作者 -->
            <div class="songDetails_info_author">
              <i class="el-icon-user"></i>
              <span v-for="(item, index) in songDeatils.ar" :key="index">
                {{ item.name }}
                {{ index === songDeatils.ar.length - 1 ? null : "/" }}
              </span>
            </div>
            <div class="songDetails_info_btn">
              <el-button size="small" round type="success">
                <i
                  class="iconfont icon-bofang"
                  @click="toPlayerPage(songDeatils.id)"
                ></i>
                播放
              </el-button>
              <el-button size="small" round>
                <i class="iconfont icon-shoucang"></i>
                收藏
              </el-button>

              <!-- 评论 -->
              <el-button size="small" round class="songCommnet">
                <i class="iconfont icon-pinglun" @click="clickMvComment"></i>
                评论
              </el-button>
            </div>
          </el-col>
        </el-row>
        <!-- 歌词 -->
        <div class="songDetails_lyric">
          <h3>
            歌词
            <i class="el-icon-copy-document" @click="copyLyric"></i>
          </h3>
          <div class="lyric_box" data-clipboard-text="复制">
            <p v-for="item in lyrics" :key="item.time">
              {{ item.content }}
            </p>
          </div>
        </div>
        <!-- 评论 -->
        <GlobalComment
          :type="0"
          :id="songDeatils.id"
          v-if="Object.keys(songDeatils).length !== 0"
        />
      </div>
    </div>
  </div>
</template>

<script>
// 引入 复制 的插件
import { getSongDetails, getLyric } from "../../../../api/songDetailsApi";
import { parseLyric } from "../../../../utils/parse-lyric";
export default {
  name: "songDetails",
  components: {},
  data() {
    return {
      songDeatils: {}, // 歌曲详情
      lyrics: [], // 歌词信息
    };
  },
  created() {
    this.getSongDetailMthods();
    this.getLyricMethods();
  },
  methods: {
    // 获取歌曲信息
    async getSongDetailMthods() {
      try {
        let result = await getSongDetails(this.$route.params.id);
        if (result.code === 200) {
          this.songDeatils = result.songs[0];
        }
      } catch (error) {}
    },
    // 获取歌词
    async getLyricMethods() {
      try {
        let result = await getLyric(this.$route.params.id);
        if (result.code === 200) {
          this.lyrics = parseLyric(result.lrc.lyric);
        }
      } catch (error) {}
    },
    // 复制歌词
    copyLyric() {
      console.log("点击了");
    },
    clickMvComment() {
      console.log("点击了");
      this.$utils.scrollTop(
        document.querySelector(".songCommnet").offsetTop,
        200
      );
    },
    // 格式化作者
    formatAuthor(artists) {
      let authors = "";
      artists.forEach((item) => {
        authors = authors + item.name + " / ";
        // console.log(authors);
      });
      return authors.slice(0, authors.length - 2);
    },
    toPlayerPage(id) {
      // 没用打开 player 窗口
      let link = this.$router.resolve({
        path: `/player/${id}`, //要跳转的路由
      });
      window.open(link.href, "player"); //打开新窗口
      // sessionStorage.setItem("open", true);
    },
  },
  computed: {},
};
</script>

<style lang="less" scoped>
.songDetails {
  padding: 30px 0;
  color: #000000;
  font-size: 14px;
  .songDetails_info {
    /deep/ .el-image img {
      border-radius: 8px;
    }
    h2 {
      font-weight: normal;
    }
    .songDetails_info_author {
      margin: 6px 0 14px;
      span {
        margin: 0 5px;
        &:hover {
          cursor: pointer;
          color: @globalColor;
        }
      }
    }
    .songDetails_info_btn {
      /deep/ .el-button {
        font-size: 14px;
      }
    }
  }

  .songDetails_lyric {
    padding-top: 15px;
    padding-bottom: 15px;
    h3 {
      color: #333333;
      font-size: 18px;
      font-weight: 500;
      margin-bottom: 15px;
    }
    .lyric_box {
      height: 600px;
      overflow-y: auto;
      p {
        height: 30px;
        line-height: 30px;
      }
    }
  }
}
</style>
